<script setup lang="ts">
import { useRoute } from "vue-router";
import { computed } from "vue";
import { GabRoutes } from "src/router/modules/Gab";

const route = useRoute();

const childrenRouter = computed(() => {
  return GabRoutes.children?.find((e) => {
    return e.name === route.matched[2].name;
  })?.children;
});
</script>

<template>
  <div ref="GabDom" class="Gab-CSS w-full h-full flex">
    <aside class="G-aside h-full w-60 box-border flex flex-col gap-6 p-6">
      <router-link
        v-for="item in childrenRouter"
        :to="{ name: item.name }"
        class="G-aside-item"
        :class="{ onActive: route.name === item.name }"
        >{{ item.meta!.label }}</router-link
      >
    </aside>
    <main class="flex-auto relative">
      <router-view />
    </main>
  </div>
</template>

<style lang="less" scoped>
.Gab-CSS {
  aside {
    border-right: var(--vast-default-border);
    .G-aside-item {
      font-weight: bold;
      font-size: 1rem;
      cursor: pointer;
      line-height: 2.5rem;
      &.onActive {
        font-size: 1.25rem;
        color: #b7a5e7;
      }
    }
  }
}
</style>
